<template>
	<view class="tui-banner-box" :style="'margin-top:'+css_info.margin_top+'upx;'">
		<swiper class="tui-banner-swiper" :circular="circular" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
			<swiper-item v-for="(item, index) in banner_info" :key="index" class="tui-banner-item" @click="goBannerDetail(item.url)" :data-index="index">
				<image
					:src="item.image"
					class="tui-slide-image"
					mode="scaleToFill"
				/>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import ikz from "@/pages/Common/tools"
	export default {
		name: 'banner',
		props: {
			showData: {
				type: Object,
			},
			cssData:{
				type: Object,
			}
		},
		data() {
			return {
				circular:true,
				indicatorDots: true,
				autoplay: true,
				interval: 5000,
				duration: 500,
				banner_info:[],
				ban_page:2,
				current:0,
				css_info:{
					margin_top:0,
				}
			};
		},
		watch: {
			showData: {
				handler(newName, oldName) {
					this.bannerInfo(newName);
				},
				immediate: true,
				deep: true
			},
			cssData: {
				handler(newName, oldName) {
					this.css_info = {
						margin_top : newName.margin_top||0,
					}
				},
				immediate: true,
				deep: true
			}
		},
		mounted() {
	
		},
		methods: {
			bannerInfo(showData){
        this.banner_info = showData;
				// var that = this;
				// var path = "/Supply/Wechat/Banner/listInfo";
				// var data = {
				// 	ban_page:this.ban_page,
				// };
				// ikz.get(path, data, (res) => {
				// 	if (res.data.status == 'success') {
				// 		this.banner_info = res.data.info;
				// 	} else {
				// 		uni.showModal({
				// 			title: '提示',
				// 			content: '服务器繁忙，请稍后再试',
				// 			showCancel: false,
				// 			success: function(res) {
				
				// 			}
				// 		});
				// 	}
				// })
			},
			goBannerDetail(e){
        console.log(e);
        ikz.getNav(e);
			},
			change: function(e) {
				this.current = e.detail.current;
			},
			
		}
	};
</script>

<style>
	/*banner*/
	.tui-banner-box {
		width: 100%;
		padding-top: 0rpx;
		box-sizing: border-box;
    border-radius: 15rpx;
    overflow: hidden;
	}
	
	.tui-banner-swiper {
		width: 100%;
		height: 360rpx;
		
	}
	
	.tui-banner-item {
		box-sizing: border-box;
	}
	
	.tui-slide-image {
		width: 100%;
		height: 360rpx;
		display: block;
    /* border-radius: 15rpx; */
		/* transition: all 0.1s linear; */
	}
	
	
</style>
